@import 'base';
@import 'common';
@mixin mt($big,$small){
    margin-top: (($big - $small)/2);
}
@mixin wh($width,$height){
    width:$width;
    height: $height;
}
.main {
    height: 880px;
    display: grid;
    grid-template-columns: 260px 940px;
    grid-template-rows: repeat(1,1fr);
    justify-content: space-around;
    .main-left-nav {
        width: 260px;
        .main-left-top-nav {
            height: 80px;
            line-height: 80px;
            i .left {
                font-size: 14px;
            }
        }
        .menu {  
            height: 593px;
            font-size: 16px;
            font-weight: 700;
            position: sticky;
            top: 138px;
            overflow: scroll;
            ul {
                li {
                    @include wh (235px,60px);
                    &:nth-child(6) {
                        padding-bottom: 70px;
                        border-bottom: 1px solid #e2d3d3;
                    }
                    a {
                        display: block;
                        width: 220px;
                        line-height: 60px;
                        font-family: cartierFont;
                        float: left;
                        .jiantou {
                            @include wh (10px,10px);
                            margin-top: 25px;
                            border-bottom: 1px solid #000;
                            border-right: 1px solid #000;
                            float: right;
                            transform: rotate3d(0,0,1,45deg);
                        }
                    }
                }
            }
            .arange {
                border-bottom: 1px solid #e2d3d3;
                margin-right: 25px;
                >div {
                    margin: 10px 0;
                    >span {
                        font-weight: normal;
                        font-size: 14px;
                        margin-left: 15px;
                    }
                }
            }
            .clean {
                a {
                    color: #999090;
                    display: block;
                    margin: 30px 40px;
                    font-weight: normal;
                }
            }
        } 
    }
    .content {
        .content-nav {
            height: 80px;
            font-size: 14px;
            line-height: 80px;
            a {
                margin-left: 730px;
            }
        }
        .banner {
            .woman {
                @include wh (940px,300px)
            }
            .love {
                margin: 30px 430px;
            }
            .ring {
                height: 880px;
                display: grid;
                grid-template-columns: repeat(4,1fr);
                grid-template-rows: repeat(2,1fr);
                gap: 2px;
                a {
                    position: relative;
                    padding: 19px 19px;
                    border: 1px solid #fff;
                    box-sizing: border-box;
                    .ring-img {
                        @include wh (195px,200px);
                    }
                    .aixin {
                        position: absolute;
                        top: 25px;
                        right: 30px;
                    }
                    .linear {
                        position: relative;
                        height: 2px;
                        background-color: #999090;
                        margin-top: 8px;
                        display: none;
                        .small-linear {
                            @include wh (39px,2px);
                            background-color: #000;
                            display: none;
                        }
                    }
                    .ring-info {
                        font-size: 14px;
                        font-weight: 700;
                        font-family: cartierFont;
                        padding: 15px 10px;
                        text-align: center;
                        i {
                            display: block;
                            padding-top: 30px;
                            p {
                                position: absolute;
                                bottom: 80px;
                                left: 50%;
                                transform: translateX(-50%);
                            }
                        }
                        .reduce {
                            width: 20px;
                            height: 20px;
                            border: 1px solid #000;
                            margin: 0 auto;
                            display: none;
                        }
                        button {
                            @include wh (200px,30px);
                            color: #fff;
                            background-color: #000;
                            border: 1px solid #000;
                            position: absolute;
                            bottom: 15px;
                            left: 50%;
                            transform: translateX(-50%);
                            transition: all 0.5s;
                            display: none;
                        }
                    }
                    &:hover {
                        border: 1px solid #e7dede;
                        .reduce,button,.linear,.small-linear {
                            display: block;
                        }
                        button:hover {
                            color: #000;
                            background-color: #fff;
                        }
                    }
                }
            }
        }
    }
}